<template lang="html">
    <div class="room-type-page normal-table-page">
        <Card :dis-hover="true">
            <div slot="title" style="color: #1c2438;font-weight: 700;">
                <Button icon="chevron-left" type="ghost" style="margin-right:10px;" @click="goLiveRoom()">直播间管理</Button>

                <Icon type="bookmark"></Icon> 直播间类型管理
            </div>
            <div slot="extra">

                <!-- <Input v-model="searchKey" class="search-input" icon="search" placeholder="标题、摘要或作者" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                    <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button> -->

                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true" style="margin-top:5px;">新增</Button>
            </div>
            <Table :columns="liveRoomTypeTableColumns" :loading="pageLoading" ref="concertTable" border :data="liveRoomTypeList"></Table>

            <!-- <transition name="fade">
                    <div class="loading-cover" v-if="pageLoading">
                        <Spin fix size="large"></Spin>
                    </div>
                </transition> -->
            <div class="page-ctrl" v-if="pageCount">
                <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
                </Page>
            </div>
        </Card>
        <Modal :mask-closable="false" v-model="showModal" :title="selectData ? '编辑':'新增'" :loading="modalLoading" class-name="live-gift-modal" @on-ok="clickOK()">
            <Form :model="liveRoomTypeForm" ref="liveRoomTypeForm" :rules="liveRoomTypeFormRules">

                <FormItem label="类型名称" prop="type_name">
                    <Input v-model="liveRoomTypeForm.type_name" placeholder="请输入直播间类型名称"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script src="./room-type.js">
</script>

<style lang="css">
</style>
